<script setup lang="ts">
import * as echarts from 'echarts';
import {ref,onMounted} from 'vue'
const charts = ref()
onMounted(()=>{
  const myCharts = echarts.init(charts.value)
  myCharts.setOption({
    title:{
      //主标题
      text:'景区排行',
      left:'50%',
      textStyle:{
        color:'yellowgreen',
        fontSize:20
      },
      //子标题
      subtext:'各大景区',
      //子标题样式
      subtextStyle:{
        color:'yellowgreen',
        fontSize:16
      }
    },
    xAxis:{
      type:'category'
    },
    yAxis:{

    },
    grid:{
      left:20,
      bottom:20,
      right:20,
    },
    //系列：决定显示图形图标是哪一种的
    series:[
      {
        type:'bar',
        data:[10,20,30,40,50,60,70],
      //柱状图：图形上的文本标签
        label:{
          show:true,
          //文字的位置
          position:'insideTop',
          //文字颜色
          color:'yellowgreen'
        },
        //是否显示背景颜色，
        showBackground:true,
        backgroundStyle:{
          color:{
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: 'green' // 0% 处的颜色
            }, {
              offset: 1, color: 'yellow' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          },
        },
        //柱条的样式
        itemStyle:{
          borderRadius:[10,10,0,0],
          color:function (data:any){
            let arr = ['red','orange','red','orange','red','orange','red']
            return arr[data.dataIndex]
          }
        }
      },
      {
        type:'line',
        data:[10,32,53,14,59,96,17],
        smooth:true
      }
    ],
    tooltip:{
      backgroundColor:'rgba(50,50,50,0.7)'
    }
  })
})
</script>

<template>
  <div class="rank-container">
    <div class="rank-tit">
      <p class="tit">热门景区排行</p>
      <p class="bg"></p>
    </div>
    <div class="charts" ref="charts">
    </div>
  </div>
</template>

<style scoped lang="scss">
.rank-container{
  background: url("../../images/dataScreen-main-lb.png") no-repeat;
  background-size: cover;
  .rank-tit{
    margin-left: 20px;
    .tit{
      color: white;
      font-size: 20px;
      margin:10px 0;
    }
    .bg{
      width: 68px;
      height: 7px;
      background: url("../../images/dataScreen-title.png");
    }
  }
  .charts{
    height: 300px;
  }
}
</style>